<template>
  <!--  采集仪信息管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.queryString" clearable placeholder="请输入采集仪SN" :maxlength="30">
        <template slot="prepend">采集仪SN/批次号</template>
      </el-input>
      <el-select v-model="form.testStatus" style="width: 140px" clearable placeholder="请选择状态">
        <el-option
          v-for="item in EnumEquipTestStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()" ref="search">搜索
      </el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click="handleAdd" class="common_btn-small">通用采集板新增</el-button>
      <el-button icon="el-icon-plus" @click="handleAddCamera" class="common_btn-small">特殊设备新增</el-button>
      <el-radio-group v-model="form.modelId" @change="form.page=1;queryList()" style="margin-bottom: 20px">
        <el-radio-button label="">所有型号</el-radio-button>
        <el-radio-button v-for="item in EnumEquipTypeList" :key="item.id" :label="item.id">
          {{item.name}}
        </el-radio-button>
      </el-radio-group>
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <!-- table -->
      <el-table
        :data="tableList"
        border>
        <el-table-column
          label="序号"
          fixed
          width="70">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="sn" sortable min-width="165" label="SN"></el-table-column>
        <el-table-column prop="batch" sortable label="批次" width="100"></el-table-column>
        <el-table-column prop="equipName" label="设备型号" width="120"></el-table-column>
        <el-table-column prop="firmwareVersion" label="固件版本" width="100"></el-table-column>
        <el-table-column prop="imei" label="IMEI" width="150"></el-table-column>
        <el-table-column min-width="120" label="状态">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.testStatus | equipStatusColor" style="color: white">
              {{scope.row.testStatusType}}
            </el-tag>
            <button slot="reference" @click="showEquipStatus(scope.row)"><i
              style="margin-left: 5px;font-size: 15px;color: #1990FE"
              class="el-icon-warning"></i></button>
          </template>
        </el-table-column>
        <el-table-column width="170" label="测试文件">
          <template slot-scope="scope">
              <span v-if="scope.row.testFile" class="info">
                <a :download="scope.row.sn+'测试文件'" :href="constUrl + scope.row.testFile"> <el-button size="mini"
                                                                                                     type="success">点击下载</el-button></a></span>
            <span v-else style="display: inline-block">
          <upload-file v-model="testFile" @update="uploadTestFile"
                       ref="uploadClear"></upload-file>
            </span>
          </template>
        </el-table-column>
        <el-table-column width="170" label="入库时间">
          <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column prop="operator" width="120" label="操作人"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="100">
          <template slot-scope="scope">
            <el-button class="btn_add" type="text" @click="getEquipLog(scope.row.id)">操作记录</el-button>
            <el-popconfirm title="确定删除吗？" style="margin-right: 16px" @confirm="handleDelete(scope.row.id)">
              <button class="btn_delete" slot="reference">刪除</button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <!-- 操作记录-->
    <el-dialog :title="equipSn +'时间线'"
               :visible.sync="isShowRecordDialog"
               :close-on-click-modal="true"
               :close-on-press-escape="false" width="200px">
      <div style="height: 400px;overflow: auto;padding: 10px">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in EquipRecordList"
            :key="index"
            color="#1990FE"
            :timestamp="activity.createTime | formatTimer">
            {{activity.operator}}将状态变更为【{{activity.testStatusName}}】
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
    <!-- 采集仪单个新增 -->
    <el-dialog
      :close-on-click-modal="false"
      title="特殊设备新增"
      :visible.sync="isShowAddCameraDialog"
      width="520px">
      <el-form label-position="right" label-width="100px" ref="formAddCamera" :rules="rules2" :model="currentRow">
        <el-form-item label="sn" prop="sn">
          <el-input v-model="currentRow.sn" placeholder="请输入SN"></el-input>
        </el-form-item>
        <el-form-item  label="型号" prop="modelId">
          <el-select v-model="currentRow.modelId" filterable clearable placeholder="请选择型号">
            <el-option
              v-for="item in EnumCameraTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowAddCameraDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateAddCameraForm">确定</el-button>
      </span>
    </el-dialog>
    <!-- 采集仪新增 -->
    <el-dialog
      :close-on-click-modal="false"
      title="通用采集板批量新增"
      :visible.sync="isShowAddDialog"
      width="520px">
      <el-form label-position="right" label-width="80px" ref="formAdd" :rules="rules" :model="currentRow">
        <el-form-item label="数量" prop="count">
          <el-input v-model="currentRow.count" placeholder="请输入数量，输入5将一次性录入5条数据！"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowAddDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateAddForm">确定</el-button>
      </span>
    </el-dialog>
    <!-- 采集仪状态详情-->
    <el-dialog
      :close-on-click-modal="false"
      :title="currentRow.sn+'-采集仪状态参数'"
      :visible.sync="isShowStatusDialog"
      width="520px">
      <div>
        <p class="equip_label"><span class="info_title">配置文件版本:</span><span
          class="info">{{currentRow.configVersion}}</span></p>
        <p class="equip_label"><span class="info_title">设备信号值:</span><span class="info">{{currentRow.csq}}</span></p>
        <p class="equip_label"><span class="info_title">固件版本:</span><span
          class="info">{{currentRow.firmwareVersion}}</span></p>
        <p class="equip_label"><span class="info_title">入口电压:</span><span
          class="info">{{currentRow.voltage/1000}}v</span></p>
        <p class="equip_label"><span class="info_title">iccid:</span><span class="info">{{currentRow.iccid}}</span></p>
        <p class="equip_label"><span class="info_title">imei:</span><span class="info">{{currentRow.imei}}</span></p>
        <p class="equip_label"><span class="info_title">cpuGuid:</span><span class="info">{{currentRow.cpuGuid}}</span>
        </p>
        <p class="equip_label"><span class="info_title">物联卡号:</span><span
          class="info">{{currentRow.iotCardNumber}}</span></p>
        <p class="equip_label"><span class="info_title">设备外壳编号:</span><span
          class="info">{{currentRow.caseCode}}</span></p>
        <p class="equip_label"><span class="info_title">基站经纬度:</span><span class="info">{{currentRow.lbsloc}}</span>
        </p>
        <p class="equip_label"><span class="info_title">4G模块电压:</span><span
          class="info">{{currentRow.vbatt/1000}}v</span></p>
        <p class="equip_label"><span class="info_title">4G固件版本:</span><span
          class="info">{{currentRow.firmwarever}}</span></p>
        <p class="equip_label"><span class="info_title">状态时间:</span><span class="info">{{currentRow.netTime | formatTimer}}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-defalut" type="primary" @click="isShowStatusDialog = false">确定</el-button>
      </span>
    </el-dialog>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>
<script>
import constUrl from '@/services/env'
import UploadFile from '@/components/upload-file'
import {
  swjQueryList,
  swjUpdate,
  swjAdd,
  swjDelete,
  getEquipType,
  cameraAdd
} from '@/services/model/sensor'
import {
  equipLog
} from '@/services/model/equip'
import Format from '@/utils/format'
import Enums from '@/utils/enums'
import XLoading from '@/components/animation/x-loading.vue'

const Echarts = require('echarts')

export default {
  mixins:[Enums],
  components: {XLoading, UploadFile},
  data() {
    return {
      equipSn: '',
      constUrl,
      downloadData: {
        icon: require('../../../assets/images/logo4.png')
      },
      isLoading: false,
      form: {
        page: 1,
        pageSize: 10,
        modelId:''
      },
      equipStatus: {},
      tableList: [],
      EquipRecordList: [],
      testFile: [],
      currentRow: {}, // 新增数据
      // 型号下拉列表
      EnumEquipTypeList: [],
      EnumEquipTestStatusList: [],
      isShowDialog: false,
      isShowAddDialog: false,
      isShowStatusDialog: false,
      isShowRecordDialog: false,
      isShowAddCameraDialog: false,
      rules: {
        count: {required: true, message: '请输入数量'},
      },
      rules2: {
        sn: {required: true, message: '请输入摄像机SN'},
        modelId: {required: true, message: '请选择摄像机型号'},
      },
      // 传感器列表
      CGQList: [],
      // 左边勾选列表
      multipleSelectionLeft: [],
      // 右边勾选列表
      multipleSelectionRight: [],
      // 右边的table列表
      rightTableListModel: [],
      myContainer: '',
      tableData: [],
      configVersionList: [],
      multipleSelection: [],
      iotCardSelect: [],
      caseSelect: [],
    }
  },
  computed: {
    EnumCameraTypeList() {
      let list = []
      this.EnumEquipTypeList.map(x => {
        if (x.flag== 0) {
          list.push(x)
        }
      })
      return list
    },
    // 弹窗的title
    dialogTitle() {
      return this.form.id ? '编辑采集仪' : '新增采集仪'
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      if (timer) {
        return Format(new Date(timer))
      }
      return ''
    },
    equipStatusColor(val) {
      switch (val) {
        case 0:
          return 'background-color:#909399'
        case 1:
          return 'background-color:#0073b7'
        case 2:
          return 'background-color:#f39c12'
        case 3:
          return 'background-color:#0DC26B'
        case 4:
          return 'background-color:#e43321'
        default:
          return 'background-color:#03a9f4'
      }
    },
  },
  methods: {
    async uploadTestFile(info) {
      this.currentRow.testFile = info[0].url
      // 待测试和待使用的设备可以上传
      await swjUpdate(this.currentRow)
    },
    showEquipStatus(row) {
      this.testFile = []
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.isShowStatusDialog = true
    },
    async getEquipType() {
      let res = await getEquipType();
      this.EnumEquipTypeList = res.data ? res.data : []
    },
    // 删除
    async handleDelete(id) {
      await swjDelete({id})
      this.$notify({
        title: '提示',
        message: '删除成功',
        type: 'success'
      })
      this.queryList()
    }
    ,
    // 表单提交
    validateAddCameraForm() {
      this.$refs.formAddCamera.validate((valid) => {
        valid && this.submitAddCameraForm()
      })
    },
    // 表单数据提交
    async submitAddCameraForm() {
      await cameraAdd(this.currentRow)
      this.isShowAddCameraDialog = false
      this.$notify({
        type: 'success',
        title: '提示',
        message: '成功新增摄像机！'
      })
      this.queryList()
    }
    ,
    // 表单提交
    validateAddForm() {
      this.$refs.formAdd.validate((valid) => {
        valid && this.submitAddForm()
      })
    },
// 表单数据提交
    async submitAddForm() {
      await swjAdd(this.currentRow)
      this.isShowAddDialog = false
      this.$notify({
        type: 'success',
        title: '提示',
        message: '成功新增' + this.currentRow.count + '个采集仪！'
      })
      this.queryList()
    }
    ,
// 打开审核弹窗
    showDialog(row) {
      this.currentRow = {checkResult: 1, id: row.id}
      this.isShowDialog = true
    }
    ,
// 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    }
    ,
// 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    }
    ,
// 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    }
    ,
    // 新增摄像机
    async handleAddCamera() {
      this.currentRow = {}
      this.isShowAddCameraDialog = true
      this.$nextTick(() => {
        this.$refs.formAddCamera.clearValidate()
      })
    }
    ,
// 新增数据
    async handleAdd() {
      this.currentRow = {}
      this.isShowAddDialog = true
      this.$nextTick(() => {
        this.$refs.formAdd.clearValidate()
      })
    }
    ,
    async queryList() {
      this.isLoading = true
      // 由于在前端进行过滤，所以name不能传到后端
      let res = await swjQueryList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      this.isLoading = false
    },
    async getEquipLog(id) {
      let res = await equipLog({id: id});
      this.isShowRecordDialog = true
      this.EquipRecordList = res.data || []
    },

  },

  mounted() {
    this.getEquipType()
    // 型号
    this.queryDictList(['EnumEquipTestStatus'], ['EnumEquipTestStatusList'])
  }
  ,
  activated() {
    this.queryList()
  }
}
</script>
<style lang="less" scoped>
  .btn_test {
    font-size: 14px;
    color: #1990FE;
  }

  .auth-unit {
    float: left;
    margin-right: 20px;
    font-size: 20px;
    margin-top: 10px;
    color: #1990FE;
    font-weight: 600;
  }

  .swj_form_item-transfer {
    display: flex;

    .left {
      flex: 1;
      border: 1px solid #E4E7ED;
      padding: 5px;
      border-radius: 8px;

      h6 {
        text-align: center;
        line-height: 30px;
        font-size: 18px;
        margin-bottom: 6px;
      }
    }

    .right {
      flex: 1;
    }

    .center {
      flex: 0 0 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .el-button:last-child {
        margin-left: 0;
        margin-top: 20px;
      }
    }

    /deep/ table {
      th {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }

  /deep/ .auth-unit {
    color: #1990FE !important;
  }

  /deep/ .el-table__column-filter-trigger i {
    color: white;
    font-size: 16px;
  }

  /deep/ .el-table th > .cell.highlight {
    color: #ffeb3b;
  }

  .equip_label {
    color: #1990FE;
    font-size: 15px;
    font-weight: 600;
    padding: 2px 0 3px 10px;

    .info_title {
      display: inline-block;
      width: 100px;
      text-align: right
    }

    .info {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.8);
      margin-left: 5px;
    }
  }

  /*二维码的样式*/
  .Qrcode {
    width: 100%;
    height: 100%;
    padding: 10px 15px;

    margin: auto;

  }

  .share {

    /*width: 200px;*/

  }
</style>
